<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            white-space: pre-wrap;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <h1>CORS跨域测试页面</h1>
    <p>当前页面运行在: <strong id="currentOrigin"></strong></p>
    <p>后端API地址: <strong>http://localhost:8080/api</strong></p>

    <div class="test-section">
        <h3>1. 测试登录接口</h3>
        <button onclick="testLogin()">测试登录</button>
        <div id="loginResult" class="result"></div>
    </div>

    <div class="test-section">
        <h3>2. 测试获取用户信息</h3>
        <button onclick="testGetUser()">测试获取用户信息</button>
        <div id="userResult" class="result"></div>
    </div>

    <div class="test-section">
        <h3>3. 测试健康检查</h3>
        <button onclick="testHealth()">测试健康检查</button>
        <div id="healthResult" class="result"></div>
    </div>

    <script>
        // 显示当前页面的源
        document.getElementById('currentOrigin').textContent = window.location.origin;

        let authToken = null;

        async function testLogin() {
            const resultDiv = document.getElementById('loginResult');
            resultDiv.textContent = '正在测试登录...';
            
            try {
                const response = await fetch('http://localhost:8080/api/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'admin',
                        password: 'admin123'
                    })
                });

                const data = await response.json();
                
                if (response.ok) {
                    authToken = data.data.token;
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `登录成功！\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `登录失败！\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求失败: ${error.message}`;
            }
        }

        async function testGetUser() {
            const resultDiv = document.getElementById('userResult');
            
            if (!authToken) {
                resultDiv.className = 'result error';
                resultDiv.textContent = '请先登录获取Token';
                return;
            }

            resultDiv.textContent = '正在获取用户信息...';
            
            try {
                const response = await fetch('http://localhost:8080/api/auth/me', {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${authToken}`,
                        'Content-Type': 'application/json',
                    }
                });

                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `获取用户信息成功！\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `获取用户信息失败！\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求失败: ${error.message}`;
            }
        }

        async function testHealth() {
            const resultDiv = document.getElementById('healthResult');
            resultDiv.textContent = '正在检查健康状态...';
            
            try {
                const response = await fetch('http://localhost:8080/api/actuator/health', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });

                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `健康检查成功！\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `健康检查失败！\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求失败: ${error.message}`;
            }
        }
    </script>
</body>
</html>
